<template>
  <el-card>
    <v-charts :options="options" />
  </el-card>
</template>

<script>
// 导入vue-echarts核心包
import VueEcharts from "vue-echarts";
// 导入绘制柱状图的工具包
// import "echarts/lib/chart/bar";
// 按需导入标题工具包 
// import "echarts/lib/component/title";
// import "echarts/lib/component/tooltip";
// import "echarts/lib/component/toolbox";
// import "echarts/lib/component/legend";
// 导入echarts所有工具包
import "echarts";

// 导入数据请求方法
import getData from '../../request/charts'
// 注册组件
export default {
  components: { "v-charts": VueEcharts },
  data() {
    return {
      // 柱状图配置对象
      options: {
        title: {
          text: "月度销售业绩统计"
        },
        // 鼠标悬浮提示
        tooltip: {},
        // 缩放/保存图片
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            }
          }
        ]
      }
    };
  },
  created(){
    getData().then(list=>{
      // 横坐标数组
      const xData=[];
      // 纵坐标数组
      const yData=[];
      list.forEach(item => {
        xData.push(item.month+'月');
        yData.push(item.total);
      });
      // 更新数据: 错误做法
      // this.options.xAxis.data=xData;
      // this.options.series.data=yData;
      // 要让图表整体刷新, 必须对配置读宪法options重新赋值
      this.options=Object.assign(this.options,{
        xAxis:{
          data:xData
        },
        series:{
          data:yData
        }
      })
    })
  }
};
</script>

<style lang="less" scoped>
.echarts {
  width: 100% !important;
}
</style>